<template>
    <div class="d-flex a-center header">
        <div class="left-text">{{props.room || '城市书房'}}</div>
        <div class="f1 text-center pb-2 d-flex a-center j-center">
            <div class="icon-left f1"></div>
            <div class="header-title f1">
                <div class="text-center">锦州市第三初级中学</div>
            </div>
            <div class="icon-right f1"></div>
        </div>
        <div class="right-text">{{datetime}}</div>
    </div>
</template>

<script setup>
    import {ref,onMounted,defineProps} from 'vue'

    const props = defineProps({
        room:String
    })
    const datetime = ref('')
    const weekly = ref({1:"星期一",2:"星期二",3:"星期三",4:"星期四",5:"星期五",6:"星期六",7:"星期日"})

    onMounted(() => {
        setInterval(()=>{
            let d = new Date()
            let year = d.getFullYear()
            let month = (d.getMonth() + 1)<10?'0'+(d.getMonth()+1):'0'+d.getDate();
            let day = d.getDate()
            let hour = (d.getHours()<10)?'0'+d.getHours():d.getHours()
            let minute = (d.getMinutes()<10)?'0'+d.getMinutes():d.getMinutes()
            let second = (d.getSeconds()<10)?'0'+d.getSeconds():d.getSeconds()
            datetime.value=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second + ' ' + weekly.value[d.getDay()]
        },100)
    })
</script>

<style scoped>
    .header{
        background-image: url("../assets/images/header.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .header-title{
        font-size: 1.3rem;
        margin:0 10px;
        letter-spacing: 10px;
        color:#00effb;
        font-weight: bolder;
    }
    .icon-left{
        background-image: url("../assets/images/left.png");
        background-size: contain;
        background-repeat: no-repeat;
        height: 100px;
        width: 100px;
        background-position: center;
    }
    .icon-right{
        background-image: url("../assets/images/right.png");
        background-size: contain;
        background-repeat: no-repeat;
        height: 100px;
        width: 100px;
        background-position: center;
    }
    .left-text{
        padding-left: 55px;
        font-size: .9rem;
    }
    .right-text{
        text-align: right;
        padding-right: 35px;
        font-size: .7rem;
    }
    .left-text,.right-text{
        min-width: 400px;
        margin-top: 40px;
        color:white;
    }
</style>